import {
	useState,
	useInsertionEffect,
	useLayoutEffect,
	useEffect,
	useId,
	useSyncExternalStore,
} from 'react'
import { useForceUpdate } from '../hooks/useForceUpdate'
// 参考链接
// https://juejin.cn/post/6844904113587634184#heading-8
export default function DiffPage() {
	const [count, setCount] = useState(0)
	const forceUpdate = useForceUpdate()
	const handleClick = () => {
		// setCount(count + 1)

		forceUpdate()
	}

	console.log('重渲染')

	// 订阅外部 store  https://juejin.cn/post/7240052076624494653
	// 当组件订阅的外部数据发生了变化时，就直接去强制刷新视图，forceUpdate 一下就可以了
	//   const state = useSyncExternalStore(store.subscribe, store.getState);
	// 获取唯一 id， 用于服务端组件
	const id = useId()

	// 在 dom 变化之前同步触发，一般用于给 dom 插入样式
	useInsertionEffect(() => {
		console.log('dom', id)
	}, [])
	// 在 dom 渲染到屏幕之前同步执行，会阻塞渲染
	useLayoutEffect(() => {
		// debugger;
	}, [])
	// 在 dom 渲染到屏幕之后，异步执行
	useEffect(() => {
		// debugger;
	}, [])
	return (
		<div className="border">
			<button onClick={handleClick}>{count}</button>
			{/* 考点1：列表不设置 key 时或者设置 key = index 时，相当于 diff 算法完全失效。 */}
			<ul>
				{count % 2 === 0
					? [2, 1, 3, 4].map((item) => {
							return <li key={item}>{item}</li>
					  })
					: [0, 1, 2, 3, 4].map((item) => {
							return <li key={item}>{item}</li>
					  })}
			</ul>
		</div>
	)
}
